<template>
  <div class="common-body">
    <!-- v-loading.fullscreen="loading"
    element-loading-text="处理中，请稍等..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)" -->
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: '/contractManagement/contractDraft/item-list' }"
          >供应链平台</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/inventoryManagement/move-store/list' }"
          >财务移库管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/inventoryManagement/move-store-account/list' }"
          >财务移库台账</el-breadcrumb-item
        >
        <el-breadcrumb-item>查看</el-breadcrumb-item>
        <span class="ellipsis1">{{ smpMoveInventory.moveInventoryName }}</span>
      </el-breadcrumb>
    </div>

    <div
      :class="[
        contractState ? 'ccui-app-container-detail' : 'detail-box',
        'ccui-clearfix'
      ]"
      v-if="isTrue"
    >
      <div :class="[!contractState ? 'detail-info' : '']">
        <!--  审批状态 icon  -->
        <div v-if="!contractState" class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div
          :class="[
            !contractState
              ? 'detail-info-form-container'
              : 'ccui-app-container-detail-body'
          ]"
        >
          <!-- <div class="ccui-app-container-detail2"> -->
          <div v-loading="loading">
            <!-- tab -->
            <anchor-jump
              @activeTabName="activeTabName"
              :active="isFocus"
              :tabs="tabs"
            />

            <!-- 基本信息展示组件 -->
            <baseInfo
              :smpMoveInventory="smpMoveInventory"
              v-show="isFocus === 'jibenxinxi'"
            />
            <!-- 采购清单列表 -->
            <purchase-list
              :smpMoveInventoryBill="smpMoveInventoryBill"
              v-show="isFocus === 'caigouqingdan'"
            />

            <!-- 附件 -->
            <uplad-file
              :moveInventoryFiles="moveInventoryFiles"
              v-show="isFocus === 'fujian'"
            />
          </div>
        </div>
      </div>

      <!--  右边审批状态  -->
      <approval-read-record
        v-if="!contractState"
        :approvalRecordData="approveRecords"
      />
    </div>

    <!--  底部导航栏及签名导出  -->
    <!--    移库-->
    <bottomGuide
      busiType="118"
      pageType="moveinventory/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import publicComponent from "@/basa/components/public";
// tab组件
import anchorJump from "../components/anchor-jump.vue";
// 基本信息组件
import baseInfo from "../components/base-info.vue";
// 采购清单列表组件
import purchaseList from "../components/purchase-list.vue";
import upladFile from "../components/upload-file.vue";
import { getdetail } from "../api";
const status = {
  1: "approving", // 审批中
  2: "withdrawn", // 已撤回
  3: "approvaled", // 审批通过
  4: "sendback", // 审批退回
  5: "unapproval" // 审批不通过
};
const tabs = [
  // tab锚点跳转数据
  { name: "jibenxinxi", label: "基本信息" },
  { name: "caigouqingdan", label: "采购清单" },
  { name: "fujian", label: "附件" }
];
export default {
  data() {
    return {
      isFocus: "jibenxinxi",
      businessCode:"",
      approveRecords: [],
      smpMoveInventory: {},
      smpMoveInventoryBill: [],
      moveInventoryFiles: [],
      tabs,
      loading: false,
      isTrue: false,
      contractState: "",
      approving: "", // 审批状态
      approvingStatus: true // 审批状态展示
    };
  },
  components: {
    approvalReadRecord: publicComponent.approvalRecord,
    bottomGuide: publicComponent.bottomGuide,
    anchorJump, // tab组件
    baseInfo, // 基本信息
    purchaseList, // 采购清单列表
    upladFile
  },
  activated() {
    this.getdetail();
    this.isFocus = "jibenxinxi";
  },
  methods: {
    handleBack() {
      this.$router.push("/inventoryManagement/move-store-account/list");
    },
    // tab切换
    activeTabName(label) {
      console.log(label);
      switch (label) {
        case "基本信息":
          this.isFocus = "jibenxinxi";
          break;
        case "采购清单":
          this.isFocus = "caigouqingdan";
          break;
        case "附件":
          this.isFocus = "fujian";
          break;
      }
    },

    // 获取数据
    getdetail() {
      this.loading = true;
      getdetail({ id: this.$route.query.id }).then(res => {
        const {
          approveRecords,
          smpMoveInventory,
          smpMoveInventoryBill,
          moveInventoryFiles
        } = res.data.data;
        console.log('xq',smpMoveInventory)
        this.approveRecords = approveRecords;
        this.smpMoveInventory = smpMoveInventory;
        this.smpMoveInventoryBill = smpMoveInventoryBill;
        this.moveInventoryFiles = moveInventoryFiles;
        this.businessCode = smpMoveInventory.moveInventoryCode;
        this.loading = false;
        this.approving = status[smpMoveInventory.approvalStatus];
        this.contractState = !approveRecords.length;
        this.approveRecords.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        this.isTrue = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-app-container-detail-body {
  padding-bottom: 80px;
}

// .container {
// display: flex;
// .ccui-app-container-detail2 {
//   position: relative;
//   width: 100%;
// }
// }
// .detail-info-el-Label {
//   position: absolute;
//   right: 64px;
//   top: 32px;
//   z-index: 999;
// }

.ellipsis1 {
  display: inline-block;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
